<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .clock {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        border: 4px solid black;
        background-color: black;
        margin: 0 auto;
        position: relative;
    }

    .center {
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #cccccc;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
    }

    .scale {
        width: 5px;
        height: 200px;
        background-color: #cccccc;
        position: absolute;
        left: 49%;
    }

    .scale1 {
        transform: rotate(30deg);
    }

    .scale2 {
        transform: rotate(60deg);
    }

    .scale3 {
        transform: rotate(90deg);
    }

    .scale4 {
        transform: rotate(120deg);
    }

    .scale5 {
        transform: rotate(150deg);
    }

    .scale6 {
        transform: rotate(180deg);
    }

    .name {
        position: absolute;
        left: 42%;
        top: 40px;
        color: #F4CD5B;
        font-size: small;
    }

    .blank {
        width: 170px;
        height: 170px;
        border-radius: 50%;
        background-color: black;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .hours {
        position: absolute;
        width: 10px;
        height: 45px;
        background-color: #666666;
        left: 50%;
        top: 0%;
        margin-top: 55px;
        transform: translate(-50%, -50%);
        transform-origin: bottom center;
        transform: rotate(30deg);
        margin-left: -5px;
    }

    .minute {
        position: absolute;
        width: 8px;
        height: 60px;
        background-color: #999999;
        left: 50%;
        top: 0%;
        margin-top: 40px;
        transform: translate(-50%, -50%);
        transform-origin: bottom center;
        transform: rotate(70deg);
        margin-left: -4px;
    }

    .second {
        position: absolute;
        width: 3px;
        height: 70px;
        background-color: brown;
        left: 50%;
        top: 0%;
        margin-top: 30px;
        transform-origin: bottom center;
        /* animation: myfirst 60s steps(60) infinite; */
        z-index: 2;
    }

    @keyframes myfirst {
        form {
            /* transform: rotate(0deg); */
        }

        to {
            transform: rotate(360deg);
        }

    }
</style>

<body>
    <div class="clock">
        <div class="scale scale1"></div>
        <div class="scale scale2"></div>
        <div class="scale scale3"></div>
        <div class="scale scale4"></div>
        <div class="scale scale5"></div>
        <div class="scale scale6"></div>
        <div class="blank"></div>
        <div class="hours"></div>
        <div class="minute"></div>
        <div class="second"></div>
        <div class="center"></div>
        <div class="name">Rolex</div>
    </div>
</body>
<script>
    function Time() {
        var date = new Date();
        var hours = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        var hours2 = hours * 30 + minute * 0.5 + second / 120;
        var minute2 = minute * 6 + second * 0.1;
        var second2 = second * 6;
        document.querySelector('.hours').style.transform = `rotate(${hours2}deg)`;
        document.querySelector('.minute').style.transform = `rotate(${minute2}deg)`;
        document.querySelector('.second').style.transform = `rotate(${second2}deg)`;
    }
    Time();
    setInterval(Time, 1000);
</script>

</html>